<template>
  <div>
    <p class="title">发布</p>
    <div>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="标题：" >
          <el-input v-model="form.name" class="biaoti"></el-input>
        </el-form-item>
        <el-form-item label="正文描述：">
          <el-input class="desc" type="textarea" v-model="form.desc" ></el-input>
        </el-form-item>

        <el-form-item label="兴趣标签：">
          <el-checkbox-group v-model="form.type">
            <el-checkbox
              v-for="item in form.interestType"
              :key="item.id"
              :label="item.name"
              name="type"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="所在地：">
          <Cityarea />
        </el-form-item>
        <el-form-item label="发布类型：">
          <el-radio-group v-model="resource">
            <el-radio label="视频"></el-radio>
            <el-radio label="图文"></el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="upload">
          <div v-if="isshow == true" class="video">
            <VideoUpload />
          </div>
          <div v-else>
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </div>
        </div>

        <el-form-item class="bnt">
          <div class="bntdiv">
        
             <el-button type="primary">取消</el-button>
          <el-button type="primary" @click="onSubmit">发布</el-button>
              
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Cityarea from "../../components/area.vue";
import VideoUpload from "../../components/VideoUpload.vue";
export default {
  components: { Cityarea, VideoUpload },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      resource: "视频",
      isshow: true,
      form: {
        name: "",
        resource: "",
        desc: "",
        type: [],
        interestType: [
          { id: 1, name: "摄影" },
          { id: 2, name: "旅游" },
          { id: 3, name: "美食" },
          { id: 4, name: "运动" },
          { id: 5, name: "历史" },
          { id: 6, name: "模特" },
          { id: 7, name: "歌唱" },
          { id: 8, name: "戏曲" },
          { id: 9, name: "舞蹈" },
          { id: 10, name: "音乐" },
          { id: 11, name: "生活" },
          { id: 12, name: "宠物" },
          { id: 13, name: "养生" },
          { id: 14, name: "书画" },
          { id: 15, name: "健康" },
          { id: 16, name: "其他" },
          { id: 17, name: "亲子" },
          { id: 18, name: "家庭" },
          { id: 19, name: "娱乐" },
        ],
      },
    };
  },
  watch: {
    resource() {
      switch (this.resource) {
        case "图文":
          this.isshow = false;
          console.log(1);
          break;
        case "视频":
          this.isshow = true;
          console.log(2, this.isshow);
          break;
        default:
          break;
      }
      //   console.log(this.resource,);
    },
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    onSubmit() {
      console.log("submit!", this.form);
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  margin-top: -10px;
}
.el-checkbox-group {
  width: 410px;
}
.upload{
    margin-left: 40px;
    // border: 1px solid ;
}
.bnt{

    margin-top: 30px;
   .el-button {
       width: 150px;
    }
}
.biaoti{
  width: 300px;
}
.desc{
  width: 500px;
  
}
.bntdiv{
  width: 310px;
  margin: 0 auto;
}
</style>